<template>
    <div id="app" :style="appScrollStyle">
        <!--<transition @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')"
        :name="'vux-pop-' + (direction === 'in' ? 'in' : 'none')">-->
        <transition>
            <keep-alive>
                <router-view class="router-view"></router-view>
            </keep-alive>
        </transition>
        <loading v-model="isLoading" text=" " loading=false></loading>
    </div>
</template>
<script>
    import {Loading} from 'vux';
    import {mapState} from 'vuex';

    export default {
        name: 'app',
        data() {
            return {}
        },
        components: {
            Loading
        },
        computed: {
            ...mapState({
                isLoading: state => state.isLoading,    // loading  状态
                direction: state => state.direction,
                appScrollStyle: state => state.appScrollStyle
            })
        }
    };
</script>

<style lang="less">
    @import '~vux/src/styles/1px.less';
    @import '~vux/src/styles/reset.less';
    @import '~vux/src/styles/close.less';
    /* 关闭样式 */
    @import './assets/iconfont/iconfont.css';
    /* 图标字体 */
    @import './style/app.less'; /* 全局样式 */
    #app {
        height: 100%;
        background: @color-white;
        .vux-header .vux-header-left .left-arrow:before {
            border-color: @color-white;
        }
    }

    .weui-dialog__btn_primary {
        color: @color-primary !important;
    }

    .vux-pop-in-enter-active,
    .vux-pop-in-leave-active {
        will-change: transform;
        transition: all 500ms;
        backface-visibility: hidden;
        perspective: 1000;
    }

    .vux-pop-in-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    .vux-pop-out-in-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    .iconfont {
        font-size: 16px;
    }

    .icon {
        width: 30px;
        height: 30px;
        fill: currentColor;
        overflow: hidden;
    }

    .v-transfer-dom {
        .vux-popup-show {
            .vux-popup-header-right {
                color: @color-primary;
            }
        }
    }

    /*iphoneX的input样式修改*/

    @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
        //如果以后出现375*812,非ios机型，可以加上下面语句
        .weui-tabbar {
            padding-bottom: 34px !important;
        }
    }
</style>


